<template>
  <div class="Mypolyline">
    <p>polyline</p>
  </div>
</template>

<script>
import * as  echarts from 'echarts'
export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      var MyChart = echarts.init(document.getElementsByClassName('Mypolyline')[0])
      MyChart.setOption(
        {
  color: ['#9E0AFE', '#00DDFF', '#F38541'],
  title: {
    text: '用户增长分布图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['新增用户', '活跃用户', '临时用户']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1日', '3日', '6日', '9日', '12日', '15日', '18日','21日','24日','27日','30日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '新增用户',
      type: 'line',
      smooth: true,//曲线平滑
      itemStyle: { // 设置折线渐变色
              color: '#9E0AFE',
              normal: {
                lineStyle: {
                  width: 10, // 折线宽度
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: 'rgba(255,255,255,0.2)'},
                    {offset: 0.2, color: 'rgba(206,165,239)'},
                    {offset: 0.4, color: 'rgba(190,75,253)'},
                    {offset: 0.6, color: 'rgba(190,75,253)'},
                    {offset: 0.8, color: 'rgba(206,165,239)'},
                    {offset: 1, color: 'rgba(255,255,255,0.2)'}
                  ]),
                }
              }
            },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: [260, 200, 330, 370, 410, 450, 440,470,500,560,540]
    },
    {
      name: '活跃用户',
      type: 'line',
      smooth: true,
      itemStyle: { // 设置折线渐变色
              color: '#00DDFF',
              normal: {
                lineStyle: {
                  width: 10, // 折线宽度
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: 'rgba(255,255,255,0.2)'},
                    {offset: 0.2, color: 'rgba(169,209,249)'},
                    {offset: 0.4, color: 'rgba(80,46,255)'},
                    {offset: 0.6, color: 'rgba(80,46,255)'},
                    {offset: 0.8, color: 'rgba(169,209,249)'},
                    {offset: 1, color: 'rgba(255,255,255,0.2)'}
                  ]),
                }
              }
            },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: [100, 240, 300, 300, 360, 390, 430,400,360,390,420]
    },
    {
      name: '临时用户',
      type: 'line',
      stack: 'Total',
      smooth: true,
      itemStyle: { // 设置折线渐变色
              color: '#F38541',
              normal: {
                lineStyle: {
                  width: 10, // 折线宽度
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: 'rgba(253,200,104,0.2)'},
                    {offset: 0.2, color: 'rgba(251,157,51)'},
                    {offset: 0.4, color: 'rgba(255,150,44)'},
                    {offset: 0.6, color: 'rgba(255,150,44)'},
                    {offset: 0.8, color: 'rgba(251,157,51)'},
                    {offset: 1, color: 'rgba(253,200,104,0.2)'}
                  ]),
                }
              }
            },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: [100, 180, 201, 224, 210, 300, 350,380,420,461,400]
    },
  
  ]
}
       )
    }

  },

}
</script>

<style lang="less" scoped>
.Mypolyline {
  padding: 20px;
  height: 374px;
  background: rgba(255,255,255,0.7);
  border-radius: 5px;
  margin-bottom: 20px;
}
</style>